<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>simulate drone</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      user-select: none;
    }

    body {
      width: 100vw;
      height: 100vh;
    }

    .page {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    }

    .full-size {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    #playground {
      width: 100%;
      height: 100%;
    }

    .top-bar {
      position: absolute;
      z-index: 3;
      top: 10px;
      left: 10px;
    }
    select, button {
      background-color: #FFFFFF88;
    }

  </style>
  <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
  <div class="page" >
    <div id="box" class="full-size">
      <canvas id="playground"/>
    </div>
  </div>
</div>
<script src="./Main.js" type="module">
</script>

</body>
</html>
